<template>
    <a-layout-content style="padding: 0 50px; margin: 50px 0">
        <a-layout style="padding: 24px 0; background: #fff">
            <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
                <!--                渲染数据s              -->
                <p>
                    <a-form layout="inline" :model="param">
                        <a-form-item>
                            <a-input v-model:value="param.name" placeholder="名称">
                            </a-input>
                        </a-form-item>
                        <a-form-item>
                            <a-button type="primary" @click="handleQuery({page: 1, size: pagination.pageSize})">
                                查询
                            </a-button>
                        </a-form-item>
                        <a-form-item>
                            <a-button type="primary" @click="add()">
                                新增
                            </a-button>
                        </a-form-item>
                    </a-form>
                </p>
                <a-table
                    :columns="columns"
                    :row-key="record => record.id"
                    :data-source="users"
                    :pagination="pagination"
                    :loading="loading"
                    @change="handleTableChange">

                    <template v-slot:action="{ text : record }">
                        <a-space size="small">
                            <a-button type="primary" @click="resetedit(record)">
                                重置密码
                            </a-button>
                            <a-button type="primary" @click="edit(record)">
                                编辑
                            </a-button>
                            <a-popconfirm
                                    title="是否删除?"
                                    ok-text="Yes"
                                    cancel-text="No"
                                    @confirm="Bdelete(record)"
                            >
                                <a-button type="danger" >
                                    删除
                                </a-button>
                            </a-popconfirm>

                        </a-space>
                    </template>
                </a-table>
                <!--                渲染数据e              -->
            </a-layout-content>
        </a-layout>
    </a-layout-content>

    <a-modal title="用户表单" v-model:visible="modelVisible"
             :confirm-loading="modelLoading"
              @ok="handleModelOk">
           <a-form :model="user" >
               <a-form-item label="登录名">
                   <a-input v-model:value="user.loginName" :disabled="user.id!=null" />
               </a-form-item>
               <a-form-item label="名称">
                   <a-input v-model:value="user.name" />
               </a-form-item>
               <a-form-item label="密码" v-show="user.id==null">
                   <a-input v-model:value="user.password" type="password" />
               </a-form-item>
           </a-form>
    </a-modal>

    <a-modal title="重置密码" v-model:visible="resetmodelVisible"
             :confirm-loading="resetmodelLoading"
             @ok="resethandleModelOk">
        <a-form :model="user" >
                    <a-form-item label="新密码">
                <a-input  v-model:value="user.password" type="password" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script lang="ts">

    import {defineComponent, onMounted, ref} from 'vue';
    import axios from 'axios';
    import  { message } from  'ant-design-vue';
    import {Tool} from "@/util/tool";

    //通知vue值已存在
    declare let hexMd5 :any;
    declare let KEY :any;

    export default defineComponent({
        name: 'AdminUser',
        setup() { //入口
            console.log("setup");
            //存储请求时要 过滤参数数据
            const param = ref();
            param.value = {};

            const users = ref();

            const columns = [
                {
                    title: '登录名',
                    dataIndex: 'loginName'
                },
                {
                    title: '名称',
                    dataIndex: 'name'
                },
                {
                    title: '操作',
                    key: 'action',//没有的数据加key
                    slots: { customRender: 'action' }
                }
            ];

            //表格分页与加载
            const pagination = ref({  //返回给组件的数据
                current: 1,
                pageSize: 10,
                total: 0
            });
            const loading = ref(false); //页面加载

            //表单
            const user=ref();
            const modelLoading = ref<boolean>(false);
            const modelVisible = ref<boolean>(false);

            const resetmodelLoading = ref<boolean>(false);
            const resetmodelVisible = ref<boolean>(false);


            //表单保存
            const handleModelOk = () => {
                modelLoading.value = true;

                user.value.password=hexMd5(user.value.password + KEY)

                axios.post("/user/save", user.value).then((response) => {
                    const data = response.data;
                    if (data.success){

                        modelLoading.value = false;
                        modelVisible.value = false;

                        handleQuery({ //点击后查询
                            page: pagination.value.current,
                            size: pagination.value.pageSize
                        });
                    }else{
                        modelLoading.value = false;
                        message.error(data.message)
                    }
                });
            };

            //表单保存
            const resethandleModelOk = () => {
                resetmodelLoading.value = true;

                user.value.password=hexMd5(user.value.password + KEY)

                axios.post("/user/resetPassword", user.value).then((response) => {
                    const data = response.data;
                    if (data.success){

                        resetmodelLoading.value = false;
                        resetmodelVisible.value = false;

                        handleQuery({ //点击后查询
                            page: pagination.value.current,
                            size: pagination.value.pageSize
                        });
                    }else{
                        resetmodelLoading.value = false;
                        message.error(data.message)
                    }
                });
            };

            //编辑
            const resetedit = (record :any) => {
                resetmodelVisible.value = true;
                user.value =Tool.copy(record);
                user.value.password = null;
            };

            //编辑
            const edit = (record :any) => {
                modelVisible.value = true;
                user.value =Tool.copy(record);
            };
            //新增
            const add = () => {
                modelVisible.value = true;
                user.value ={};
            };
            //删除
            const Bdelete = (record :any) => {
                axios.delete("/user/delete/"+record.id).then((response) => {
                    const data = response.data;
                    if (data.success){
                        handleQuery({ //点击后查询
                            page: pagination.value.current,
                            size: pagination.value.pageSize
                        });
                    }
                });
            };

            /**
             * 数据查询
             **/
            const handleQuery = (params: any) => {
                loading.value = true;

                axios.get("/user/list", {
                    params: {
                        page: params.page, //请求的页数
                        size: params.size, //请求的多少个数据
                        name: param.value.name //过滤参数
                    }
                }).then((response) => {
                    loading.value = false;
                    const data = response.data;
                    if (data.success){
                        users.value = data.content.list; //
                        // 重置分页按钮
                        pagination.value.current = params.page;//当前页
                        pagination.value.total = data.content.total;//总页数
                    }else{
                       message.error(data.message);
                    }
                });
            };

            /**
             * 表格点击页码时触发
             */
            const handleTableChange = (pagination: any) => {
                console.log("分页参数都：" + pagination);
                handleQuery({ //点击后查询
                    page: pagination.current,
                    size: pagination.pageSize
                });
            };

            onMounted(() => {
                handleQuery({
                    page:pagination.value.current,
                    size:pagination.value.pageSize,
                    param:param
                })
            });

            return {
                columns,
                pagination,
                users,
                loading,
                handleTableChange,
                modelLoading,
                modelVisible,
                edit,
                Bdelete,
                add,
                handleModelOk,
                user,
                handleQuery,
                param,
                resetmodelLoading,
                resetmodelVisible,
                resetedit,
                resethandleModelOk,
            };
        },
    });
</script>
